<template>
  <div>
    <!--********************导航菜单********************* -->
    <el-menu
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-row type="flex" justify="end">
        <el-col :span="2">
          <el-menu-item index="home">
            <i class="el-icon-s-home"></i>首页
            <el-badge class="item"></el-badge>
          </el-menu-item>
        </el-col>
        <el-col :span="2">
          <el-menu-item index="myborrow">
            <i class="el-icon-shopping-cart-2"></i>借阅记录
            <el-badge class="item"></el-badge>
          </el-menu-item>
        </el-col>
        <el-col :span="3">
          <el-menu-item index="borcart">
            <i class="el-icon-shopping-cart-2"></i>我的借阅车
            <el-badge class="item" :value="this.$store.getters.cartNum"></el-badge>
          </el-menu-item>
        </el-col>
        <el-col :span="2">
          <el-menu-item index="profile">
            <i class="el-icon-s-custom"></i>个人信息
          </el-menu-item>
        </el-col>
        <el-col :span="2">
          <el-menu-item index="index">
            <i class="el-icon-s-tools"></i>退出系统
          </el-menu-item>
        </el-col>
      </el-row>
    </el-menu>
    <!--******************** 嵌套路由出口：首页，借阅记录，我的借阅车，个人信息 ********************* -->
    <router-view></router-view>
  </div>
</template>
<script>
import { listBorcart } from "@/api/system/borcart";
import { getInfo } from "@/api/login";

export default {
  data() {
    return {
      // 查询参数
      queryParams: {},
    };
  },
  created() {
    this.$store.dispatch("GetInfo"); // 获取头像数据
    // 跳转客户端首页
    this.handleSelect("home");
    // 获取购物车数据
    getInfo().then(res => {
      this.getListCart(res.user.userId);
    });
  },

  methods: {
    // 菜单选择
    handleSelect(key) {
      // 跨页面修改档案分类卡片显示状态
      this.$store.commit("SET_CARD_STATE", true);
      if (key == "home") {
        // 跳转客户端首页
        if(this.$route.path !== '/client/home'){
          this.$router.push({ path: "/client/home" });
        }
      }else if (key == "myborrow") {
        // 跳转借阅记录
        if(this.$route.path !== '/client/myborrow'){
          this.$router.push({ path: "/client/myborrow" });
        }
      }else if (key == "borcart") {
        // 跳转借阅车
        if(this.$route.path !== '/client/borcart'){
          this.$router.push({ path: "/client/borcart" });
        }
      } else if (key == "profile") {
        // 跳转个人信息
        if(this.$route.path !== '/client/profile'){
          this.$router.push({ path: "/client/profile" });
        }
      } else if (key == "index") {
        // 跳转登录界面
        this.$router.push({ path: "/" });
      }
    },
    // 获取借阅车数据
    getListCart(userId) {
      this.queryParams.userId = userId;
      listBorcart(this.queryParams).then(response => {
        this.$store.commit('SET_CART_NUM', response.total)
      });
    }
  }
};
</script>